<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--append(content) 为所有匹配的元素的内部追加内容-->
		<!-- <p id="b">编程词典</p> -->
		
		<!--appendTo(content) 将所有匹配元素添加到另一个元素的元素集合中-->
		<!-- <p id="B">编程词典</p> -->
		<!-- <p id="A">明日图书</p> -->
		
		<!--prepend(content) 为所有匹配的元素的内部追加前置内容-->
		<p id="b">编程词典</p>
		
		<!--prependTo(content)将所有匹配元素前置到另一个元素的元素集合中-->
		<!-- <p id="B">编程词典</p>
		<p id="A">明日图书</p> -->
		
		<!--after(content) 在每个匹配的元素之后插入内容-->
		<!-- <p id="B">编程词典</p> -->
		
		<!--insertAfter(content) 将所有匹配的元素插入到另一个指定元素的元素集合的后面-->
		<!-- <p id="B">编程词典</p> -->
		
		<!--before(content) 在每个匹配的元素之前插入内容-->
		<!-- <p id="B">编程词典</p> -->
		
		<!-- insertBefore(content)把所有匹配的元素插入到另一个指定元素的元素集合的前面 -->
		<!-- <p id="A">莫凡图书</p>
		<p id="B">JQuery基础开发编程</p> -->
	</body>
</html>

<script src="../../JQ/jquery-3.5.1.min.js"></script>
<script>
	$(function(){
		// <!--append(content) 为所有匹配的元素的内部追加内容-->
		// $("#b").append("<p>A</p>");
		
		// <!--appendTo(content) 将所有匹配元素添加到另一个元素的元素集合中-->
		// $("#B").appendTo("#A");
		
		// <!--prepend(content) 为所有匹配的元素的内部追加前置内容-->
		$("#b").prepend("<p>A</p>");
		
		// <!--prependTo(content)将所有匹配元素前置到另一个元素的元素集合中-->
		//$("#B").prependTo("#A");
		
		// <!--after(content) 在每个匹配的元素之后插入内容-->
		//$("#B").after("<p>A</p>");
		
		// <!--insertAfter(content) 将所有匹配的元素插入到另一个指定元素的元素集合的后面-->
		//$("<p>test</p>").insertAfter("#B");
		
		// <!--before(content) 在每个匹配的元素之前插入内容-->
		// $("#B").before("<p>A</p>");
		
		// <!-- insertBefore(content)把所有匹配的元素插入到另一个指定元素的元素集合的前面 -->
		//$("#B").insertBefore("#A");
	})
</script>
<!--
内部插入

append(content) 为所有匹配的元素的内部追加内容
<p id="b">编程词典</p>
$("#b").append("<p>A</p>");
结果：
<p id="b">编程词典<p>A</p></p>

appendTo(content) 将所有匹配元素添加到另一个元素的元素集合中
<p id="B">编程词典</p>
<p id="A">明日图书</p>
$("#B").appendTo("#A");
将B移动到A的里面并且在后面
结果
<p id="A">明日图书<p id="B">编程词典</p></p>

prepend(content) 为所有匹配的元素的内部追加前置内容
<p id="b">编程词典</p>
$("#b").prepend("<p>A</p>");
结果
<p id="b"><p>A</p>编程词典</p>

prependTo(content)将所有匹配元素前置到另一个元素的元素集合中
<p id="B">编程词典</p>
<p id="A">明日图书</p>
$("#B").prependTo("#A");
将B移动到A的里面并且在前面
结果
<p id="A"><p id="B">编程词典</p>明日图书</p>
-->

<!--
外部插入

after(content) 在每个匹配的元素之后插入内容
<p id="B">编程词典</p>
$("#B").after("<p>A</p>");
B元素的后面添加一个段落A
结果
<p id="B">编程词典</p>
<p>A</p>

insertAfter(content) 将所有匹配的元素插入到另一个指定元素的元素集合的后面
<p id="B">编程词典</p>
$("<p>test</p>").insertAfter("#B");
将段落插入到B后面
结果
<p id="B">编程词典</p>
<p>test</p>

before(content) 在每个匹配的元素之前插入内容
<p id="B">编程词典</p>
$("#B").before("<p>A</p>");
在B前添加段落A
结果
<p>A</p>
<p id="B">编程词典</p>

insertBefore(content)把所有匹配的元素插入到另一个指定元素的元素集合的前面
<p id="A">莫凡图书</p>
<p id="B">JQuery基础开发编程</p>
$("#B").insertBefore("#A");
将B添加到A的前面
结果
<p id="B">JQuery基础开发编程</p>
<p id="A">莫凡图书</p>

-->